import { Tabs, Typography } from '@arco-design/web-react';
import { useRecoilValue } from 'recoil';
import { userInfoState } from '../../../store/userInfo';
import { ConversationInfoItem, PermissionType } from '../../types/conversation';
import { ConversationItem } from './components/ConversationItem';
const TabPane = Tabs.TabPane;

import './index.css';

interface ConversationListProps {
  data: Array<ConversationInfoItem>;
  onlyShowAll?: boolean;
  currentConversation?: ConversationInfoItem;
  handleChangeConversation: (conversation: ConversationInfoItem) => void;
}

export const ConversationList: React.FC<ConversationListProps> = (props) => {

  const { data, currentConversation, handleChangeConversation, onlyShowAll } = props;
  const userInfo = useRecoilValue(userInfoState);

  return (
    <div className='conversation-tabs-wrapper'>
      <Tabs
        defaultActiveTab='1'
      >
        <TabPane key='1' title='全部'>
          <Typography.Paragraph>
            <div className='conversation-list-wrapper'>
              {data.map(item => {
                return <div key={item.conversation_id}>
                  <ConversationItem
                    isSelect={item.conversation_id === currentConversation?.conversation_id}
                    currentConversation={currentConversation}
                    handleChangeConversation={handleChangeConversation}
                    data={item} />
                </div>
              })}
            </div>
          </Typography.Paragraph>
        </TabPane>

        {(!onlyShowAll && userInfo.permission !== PermissionType.customer) ? <TabPane key='2' title='处理中'>
          <Typography.Paragraph >
            <div className='conversation-list-wrapper'>
              {data.map(item => {
                if (item.type === 2) {
                  return <div key={item.conversation_id}>
                    <ConversationItem
                      isSelect={item.conversation_id === currentConversation?.conversation_id}
                      currentConversation={currentConversation}
                      handleChangeConversation={handleChangeConversation}
                      data={item} />
                  </div>
                }
                return null;
              })}
            </div>
          </Typography.Paragraph>
        </TabPane> : null}

        {(!onlyShowAll && userInfo.permission !== PermissionType.customer) ? <TabPane key='3' title='待处理'>
          <Typography.Paragraph >
            <div className='conversation-list-wrapper'>
              {data.map(item => {
                if (item.type === 3) {
                  return <div key={item.conversation_id}>
                    <ConversationItem
                      isSelect={item.conversation_id === currentConversation?.conversation_id}
                      currentConversation={currentConversation}
                      handleChangeConversation={handleChangeConversation}
                      data={item} />
                  </div>
                }
                return null;
              })}
            </div>
          </Typography.Paragraph>
        </TabPane> : null}

        {(!onlyShowAll && userInfo.permission !== PermissionType.customer) ? <TabPane key='4' title='已结束'>
          <Typography.Paragraph >
            <div className='conversation-list-wrapper'>
              {data.map(item => {
                if (item.type === 1) {
                  return <div key={item.conversation_id}>
                    <ConversationItem
                      isSelect={item.conversation_id === currentConversation?.conversation_id}
                      currentConversation={currentConversation}
                      handleChangeConversation={handleChangeConversation}
                      data={item} />
                  </div>
                }
                return null;
              })}
            </div>
          </Typography.Paragraph>
        </TabPane> : null}
      </Tabs>
    </div>
  )
}